
{% if section and section.type == "header" %}
{% assign section = section %}
{% assign router = section.router %}
{% else %}
{% assign section = global.sections.header %}
{% assign router = routes.current_route %}
{% endif %}


{% if section.settings.is_index_board and router == "index/index" and section.settings.is_board %}
{% assign showBoard = true %}
{% elsif section.settings.is_index_board == false and section.settings.is_board %}
{% assign showBoard = true %}
{% else %}
{% assign showBoard = false %}
{% endif %}


<style>

/*头部*/
#header_box{
    position: relative;
}
.top_bar{
    display: block;
    /* line-height: 3;
    color: #fff;
    background: #383838; */
    /* text-align: center; */
    font-size: 12px;
    text-align: center;
    line-height: 20px;
    padding: 10px 0;
    /* border-bottom: 1px solid #eeeeee; */
}
#header_box .header_wrapper{
    display: flex;
    display: -webkit-flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: center;
}
#header_box .logo a{
    font-size: var(--title_font_size);
    color: var(--title_color);
    font-family: var(--title_font_family);
    font-style: var(--title_font_style);
    font-weight: var(--title_font_weigth);
    letter-spacing: var(--title_letter_spacing);
    display: flex;
    align-items: center;
}
#header_box .logo img{
    max-height: 70px;
    max-width: 200px;
}
#header_box .header_icon{
    display: flex;
    display: -webkit-flex;
    flex-wrap: wrap;
    /* justify-content: flex-end; */
}
#header_box .header_icon>a{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 80px;
    margin-left: 30px;
    position: relative;
}
#header_box .header_icon a svg{}
#header_box .header_icon a.cart_icon span{
    min-width: 20px;
    height: 20px;
    background: #F00B0B;
    display: none;
    color: #fff;
    border-radius: 50%;
    text-align: center;
    line-height: 20px;
    font-size: 12px;
    position: absolute;
    top: 50%;
    right: -10px;
    margin-top: -20px;
}
#header_box .nav {
    width: auto;
}
#header_box .nav > ul{
    height: 80px;
    display: flex;
    display: -webkit-flex;
    justify-content: center;
}
#header_box .nav li{
    margin: 0 20px ;
    display: block;
    list-style-type: none;
}
#header_box .nav li .nav-li-a{
    display: block;
    /* line-height: 80px; */
    height: 80px;
    font-weight: 400;
    
    letter-spacing: var(--nav_letter_spacing);
    font-size: 16px;
    display: flex;
    align-items: center;
}
#header_box .nav li .nav-li-a a{
    color: var(--menu-color);
}
#header_box .nav li .nav-li-a svg{
    margin-left: 5px;
}
#header_box .pop_search{
    position: absolute;
    left: 0;
    bottom: -124px;
    height: 124px;
    width: 100%;
    background: #f4f4f4;
    opacity: 0;
    visibility: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999999;
    transition: all 0.3s;
}

#header_box .pop_search form{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
#header_box .pop_search .search_txt{
    height: 44px;
    border: 0;
    width: calc(100% - 140px);
    text-indent: 10px;
    background: none;
    box-sizing: border-box;
    font-size: 16px;
    border: 1px solid var(--main_button_bg);
}
#header_box .pop_search .search_btn{
    width: 140px;
    height: 44px;
    line-height: 44px;
    border: 0;
    background:var(--main_button_bg);
    margin: 0;
    color: var(--main_button_color);
    text-align: center;
    cursor: pointer;
}

#header_box .pop_search_on{
    opacity: 1;
    visibility: visible;
}
#header_box .pop_search_on .pop_search_wrapper{
    height: 90px;
    padding: 0 20px;
}
#header_box .mobile_menu_icon{
    display: none;
}
#header_box .currency_box{
    height:80px;
    position:relative;
    z-index:999;
    margin-left: 30px;
}
#header_box .currency_txt{
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--menu-color);
    letter-spacing: var(--nav_letter_spacing);
    font-size: 16px;
    height:80px;
    line-height:80px;
    cursor:pointer;
}
#header_box .drop_currency a {
    color: var(--menu-color);
    letter-spacing: var(--nav_letter_spacing);
    font-size: 14px;

  }
#header_box .currency_txt svg{
    width: 14px;
    fill: #333;
    margin-left: 5px;
}

#header_box .drop_currency{
    position:absolute;
    top:80px;
    left:0;
    padding:10px;
    width:120px;
    box-sizing:border-box;
    background:#fff;
    border:1px solid #e8e8e8;
    -webkit-transition: transform .2s ease-in-out;
    -moz-transition: transform .2s ease-in-out;
    transition: transform .2s ease-in-out;
    -webkit-transform: scale3d(1,0,1);
    transform: scale3d(1,0,1);
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
}
#header_box .drop_currency_on .drop_currency{
    -webkit-transform: scale3d(1,1,1);
    transform: scale3d(1,1,1);
}
#header_box .currency_txt svg{
    -webkit-transition: transform .2s ease-in-out;
    -moz-transition: transform .2s ease-in-out;
    transition: transform .2s ease-in-out;
}
#header_box .drop_currency_on .currency_txt svg{
    transform:rotate(-180deg);
}
#header_box .drop_currency li{
    list-style-type: none;
}
#header_box .drop_currency a{
    display: flex;
    justify-content: space-between;
    height: 30px;
    line-height: 30px;
    padding: 0 10px;
    /* color: #333; */
    margin: 0;
}
#header_box .drop_currency a:hover{
    background:#000;
    color:#fff;
}



.mobile_menu{
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100vh;
    background: rgba(0,0,0,.5);
    z-index: 999999;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s;
 
}
.mobile_menu .mobile_menu_wrapper{
    background: #fff;
    width: 70%;
    height: 100vh;
    overflow-y: auto;
    transform: translate(-100%,0);
    transition: all 0.3s;
    padding-bottom: constant(safe-area-inset-bottom); 
    padding-bottom: env(safe-area-inset-bottom); 
}
.mobile_menu .mobile_menu_top{
    display: flex;
    display: -webkit-flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 15px;
    height: 50px;
    border-bottom: 1px solid #ddd;
}
.mobile_menu .mobile_nav{
    /* padding: 15px 0; */
}
.mobile_menu .mobile_nav li a{
    /* line-height: 3; */
    flex: 1;
    padding: 0 18px;
    height:64px;
    display: flex;
    align-items: center;
    color: var(--menu-color);
    justify-content: space-between;
    box-sizing: border-box;
}
.mobile_menu .mobile_nav li >.avtive{
    background-color: #e3e3e3;
}
.mobile_menu .mobile_nav li  .child_mobile_nav{
    background-color: #f7f7f7;
    display: none;
}

.mobile_menu .mobile_currency{
    padding: 0 15px;
}
.mobile_menu .mobile_currency select{
    height: 40px;
    width: 100%;
    border: 1px solid #ddd;
    border-radius: 2px;
}
.mobile_menu_on{
    opacity: 1;
    visibility: visible;
}
.mobile_menu_on .mobile_menu_wrapper{
    transform: none;
}

@media (max-width: 1200px){
    #header_box .pop_search_wapper{
        padding-left: 3.5rem;
        padding-right: 3.5rem;
        box-sizing: border-box;
    }
}
@media (max-width: 992px){}
@media (max-width: 768px){
    #header_box .pop_search_wapper{
        padding-left: 2rem;
        padding-right: 2rem;
        box-sizing: border-box;
    }
    /* #header_box .pop_search form{
        width: calc(100% - 50px);
    } */
    #header_box .mobile_menu_icon{
        display: block;
        line-height: 1;
    }
    #header_box .header_wapper{
        flex-wrap: nowrap;
    }
    #header_box .logo img{
        max-width: 10rem;
    }
    #header_box .nav{
        display: none;
    }
    #header_box .header_icon>.saerch_icon,#header_box .header_icon>.account_icon{
        display: none;
    }
    /* #header_box .header_icon .saerch_icon{
        display: none;
    } */
    #header_box .header_icon a svg{
        width: 26px;
        height: 26px;
    }
    #header_box .mobile_menu_icon svg{
        width: 26px;
        height: 26px;
    }
    #header_box .pop_search_on .pop_search_wapper{
        height: 125px;
        padding: 0 15px;
    }
    #header_box .currency_box{
        display: none;
    }
    #header_box .header_icon>a{
        margin-left: 0;
    }
    #header_box .logo a{
        font-size: calc(var(--title_font_size) * var(--wap_title_scale));
    }
}
@media (max-width: 767px){
    .container_wapper{
        padding-left: 1rem;
        padding-right: 1rem;
        box-sizing: border-box;
    }
    
    #footer_box .footer_link{
        flex-wrap: wrap;
    }
    #footer_box .footer_link dl{
        width: 100%;
        margin-bottom: 30px;
        text-align: center;
    } 
    #header_box .header_icon>a{
        margin-left: 0;
    }

}
  #header_box .nav .nav-li:hover{
    border-bottom: 3px solid var(--menu-color);
  }

  #header_box .nav .nav-li:hover .nav-child{
    display: block;
  }


  @media (max-width: 767px) {

    #header_box .saerch_icon,
    #header_box .account_icon {
      display: none;
    }
  }

  .nav-box {
    position: relative;
  }

  .nav-child {
    /* display: flex; */
    display: none;
    position: absolute;
    left: -2px;
    right: 0;
    top: 100%;
    padding: 80px 0;
    background-color: #fff;
    border-top: 1px solid #eeeeee;
    /* justify-content: center; */
    /* visibility: hidden; */
    z-index: 1000;
  }
  .nav-child ul {
    display: flex;
    justify-content: center;
  }
  .nav-child li {
    margin: 0 20px;
  }

  .nav-child dt {
    font-size: 14px;
    line-height: 18px;
    color: var(--menu-color);
    margin-bottom: 30px;
  }
  .nav-child dd a{
    font-size: 14px;
    line-height: 18px;
    color: var(--menu-color);
    font-weight: 300;
    opacity: 0.6;
  }
  .nav-child dd + dd{
    margin-top: 30px;
  }
  .mobile_nav-item{
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .mobile_nav-item svg{
    cursor: pointer;
    padding:  12px 18px;
    transition: transform .25s;
  }

  .mobile_nav-item-open svg{
    transform: rotate(180deg)
  }

  .search-mobile-box{
    padding: 12px;
    display: flex;
    align-items: center;
  }
  .search-mobile-icon{
    margin-right: 13px;
  }

  .search-mobile-input{
    flex: 1;
    height: 46px;
    font-size: 14px;
    line-height: 36px;
  }
  .button-claer{
    background-color: transparent;
    padding: 0;
  }
 

  .mobile_menu-clear{
    position: absolute;
    top:28px;
    left: calc(70% + 30px);
  }

</style>

{% get_nav nav_id={section.settings.nav.id} %}
{% assign header_nav = nav %}
<div class="page_container">
    <div id="header_box" class="header_box" style="background-color:{{ section.settings.nav_bg }}">
      {% if showBoard %}
      <a class="top_bar" href="{{ section.settings.board_link.url }}" style="background-color:{{ section.settings.board_bg }};color: {{ section.settings.board_font }};">{{ section.settings.board_text }}</a>
      {% endif %}
     <div class="nav-box">
     
      <div class="header_wrapper container_wrapper">
        <a class="mobile_menu_icon" href="javascript:void(0);">
          <svg t="1637129868590" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3968" width="32" height="32">
            <path d="M0 160m32 0l768 0q32 0 32 32l0 0q0 32-32 32l-768 0q-32 0-32-32l0 0q0-32 32-32Z" fill="{{section.settings.icon_color}}" p-id="3969"></path>
            <path d="M0 480m32 0l768 0q32 0 32 32l0 0q0 32-32 32l-768 0q-32 0-32-32l0 0q0-32 32-32Z" fill="{{section.settings.icon_color}}" p-id="3970"></path>
            <path d="M0 800m32 0l768 0q32 0 32 32l0 0q0 32-32 32l-768 0q-32 0-32-32l0 0q0-32 32-32Z" fill="{{section.settings.icon_color}}" p-id="3971"></path>
          </svg>
        </a>

        
        <div class="logo">
          <a href="/">
            {% if section.settings.logo_pic.src %}
            {{public_asset_abs_url}}
            <img data-src="{{ section.settings.logo_pic.src  }}" data-crop-type="height" src="{{ 'empty.png' | public_asset_abs_url }}"  alt="{{ section.settings.logo_pic.alt}}" >           
            {% else %} 
            {{ storeConfig.name }}
            {% endif %}
          </a>
        </div>

        
  
        
  
        <div class="header_icon">
          <div class="nav" style="--menu-color:{{section.settings.menu_color}}">
          <ul>
          
            {% if section.settings.nav.id %}
            {% for item in header_nav.nav_item %}
            <li class="nav-li">
            <div class="nav-li-a" >
            {% include "nav_a", nav : item  %}
            {% if item.children %}
            <svg t="1636003081626" style="margin-top: -2px;" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2399" width="10" height="10"><path d="M65.582671 288.791335l446.417329 446.41733 446.417329-446.41733z" fill="{{section.settings.menu_color}}" p-id="2400"></path></svg>
            {% endif %}
            </div>
            {% if item.children %}
            <div class="nav-child">
              <ul>
                {% for el in item.children %}
                <li>
                  <dl>
                      <dt>
                      {% include "nav_a", nav : el  %}
                      </dt>
                    {% if el.children %}
                    {% for ddItem in el.children %}
                    <dd>
                     {% include "nav_a", nav : ddItem  %}
                    </dd>
                    {% endfor %}
                    {% endif %}
                    
                  </dl>
                </li>
                {% endfor %}
                
              </ul>
            </div>
            {% endif %}
            </li>
            {% endfor %}
            {% else %}
            <li class="nav-li"><a class="nav-li-a" href="/" >Home</a></li>
            {% endif %}
          </ul>
        </div>

          {% if section.settings.is_currency %}
          <div class="currency_box" style="--menu-color:{{section.settings.menu_color}}">
            <div class="currency_txt" id="currencyBox">
              {{ currency.standard_code }}
              <svg t="1636003081626" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2399" width="10" height="10"><path d="M65.582671 288.791335l446.417329 446.41733 446.417329-446.41733z" fill="{{section.settings.menu_color}}" p-id="2400"></path></svg>
            </div>
            <div class="drop_currency" id="currencyCon">
              <ul class="currency">
                {% get_currencies limit=100 %}
                {% for list in currencies %}
                <li>
                  <!-- href="?currency={{ list.standard_code }}" -->
                  <a href="javascript:void(0);" class="web-currency" data-type="{{ list.standard_code }}" rel="nofollow">
                    <span>{{ list.standard_code }}</span><span>{{ list.symbol_left }}{{ list.symbol_right }}</span>
                  </a>
                </li>
                {% endfor %}
  
              </ul>
            </div>
            <script>
              $("#currencyBox").click(function (e) {
                e.stopPropagation();
                if ($('.currency_box').hasClass('drop_currency_on')) {
                  $('.currency_box').removeClass('drop_currency_on');  
                } else {
                   $('.pop_search').removeClass('pop_search_on');
                  $('.currency_box').addClass('drop_currency_on');
                }
              });
              $('.drop_currency').click(function (e) {
                e.stopPropagation();
              });
              $(document).click(function () {
                $('.currency_box').removeClass('drop_currency_on');
              });
            </script>
          </div>
          {% endif %}
          {% if section.settings.is_search %}
          <a class="saerch_icon" href="javascript:void(0);">
              <svg t="1637129710453" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3527" width="22" height="22">
                <path fill="{{section.settings.icon_color}}" d="M747.52 696.32l133.12 133.12c15.36 15.36 15.36 35.84 0 51.2-15.36 15.36-35.84 15.36-51.2 0l-133.12-133.12c-158.72 133.12-399.36 107.52-527.36-51.2s-107.52-399.36 51.2-527.36 399.36-107.52 527.36 51.2c117.76 138.24 117.76 337.92 0 476.16zM460.8 158.72C291.84 158.72 158.72 291.84 158.72 460.8s133.12 302.08 302.08 302.08c168.96 0 302.08-133.12 302.08-302.08 0-168.96-133.12-302.08-302.08-302.08z" p-id="3528"></path>
              </svg>
            </a>
          {% endif %}
  
          {% if section.settings.is_member %}
          <a class="account_icon" href="/account/login">
            <svg t="1637129772556" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3684" width="22" height="22">
              <path fill="{{section.settings.icon_color}}"
                d="M870.4 916.48v-10.24c-15.36-133.12-107.52-250.88-230.4-307.2 122.88-81.92 153.6-250.88 71.68-373.76C629.76 102.4 460.8 71.68 337.92 153.6s-153.6 250.88-71.68 373.76c20.48 25.6 40.96 51.2 71.68 71.68-128 51.2-215.04 168.96-235.52 302.08V916.48c0 20.48 15.36 40.96 40.96 40.96 20.48 0 35.84-15.36 35.84-35.84 20.48-148.48 143.36-266.24 291.84-276.48h30.72c148.48 10.24 271.36 122.88 291.84 271.36 0 20.48 15.36 35.84 35.84 40.96 25.6-5.12 40.96-20.48 40.96-40.96zM291.84 373.76c0-107.52 87.04-194.56 194.56-194.56 107.52 0 194.56 87.04 199.68 194.56-5.12 102.4-81.92 184.32-184.32 194.56h-30.72c-102.4-10.24-179.2-92.16-179.2-194.56z"
                 p-id="3685"></path>
            </svg>
          </a>
          {% endif %}

          <a class="cart_icon" {% if page_ca != 'cart_list' %} id="cart_icon" {% endif %} href="javascript:void(0);">
            <svg t="1637129817677" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3811" width="22" height="22">
              <path fill="{{section.settings.icon_color}}"
                d="M415.904 830.56a64 64 0 1 0 64 64 64 64 0 0 0-64-64z m447.168 0a64 64 0 1 0 64 64 64 64 0 0 0-64-64z m63.36-32h-518.72a94.656 94.656 0 0 1-92.128-82.88L261.408 334.368l-30.816-178.24a32.608 32.608 0 0 0-29.952-28.256H159.904a32 32 0 1 1 0-64h40.704a95.296 95.296 0 0 1 93.184 82.88l30.752 177.536 54.4 382.976a31.328 31.328 0 0 0 28.8 27.296h518.752a32 32 0 1 1 0 64z m-478.816-127.712a32 32 0 0 1-2.336-63.776l433.312-32a32 32 0 0 0 31.072-26.784l50.24-287.808a39.616 39.616 0 0 0-8.096-29.76 19.776 19.776 0 0 0-15.328-7.04h-552.96a32 32 0 1 1 0-64h552.992a83.2 83.2 0 0 1 63.136 28.544 103.488 103.488 0 0 1 23.488 81.472l-50.336 288a94.272 94.272 0 0 1-91.904 81.184l-430.944 32h-2.368z m0 0"
                p-id="3812"></path>
            </svg>
            <span id="cart_number"></span></a>
        </div>
  
      </div>
    </div>
  
      <!-- 搜索 -->
      <div class="pop_search">
        <div class="container_wrapper">
          <form action="/search" onsubmit="return oemsaasSearch('.search_txt')">
            <input class="search_txt"  type="text" name="q" placeholder="{{ section.settings.search_placeholder }}">
            <button class="search_btn" type="submit">{{ lang.general.searchword }}</button>
          </form>
        </div>
      </div>
      <!-- 移动端菜单 -->
      <div class="mobile_menu"  style="--menu-color:{{section.settings.menu_color}}">
        <svg t="1631538204213" class="mobile_menu-clear" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1295" width="20" height="20">
          <path
            d="M571.01312 523.776l311.3472-311.35232c15.7184-15.71328 15.7184-41.6256 0-57.344l-1.69472-1.69984c-15.7184-15.71328-41.6256-15.71328-57.34912 0l-311.3472 311.77728-311.35232-311.77728c-15.7184-15.71328-41.63072-15.71328-57.344 0l-1.69984 1.69984a40.0128 40.0128 0 0 0 0 57.344L452.92544 523.776l-311.35232 311.35744c-15.71328 15.71328-15.71328 41.63072 0 57.33888l1.69984 1.69984c15.71328 15.7184 41.6256 15.7184 57.344 0l311.35232-311.35232 311.3472 311.35232c15.72352 15.7184 41.63072 15.7184 57.34912 0l1.69472-1.69984c15.7184-15.70816 15.7184-41.6256 0-57.33888l-311.3472-311.35744z"
            p-id="1296" fill="#FFFFFF"></path>
        </svg>
        <div class="mobile_menu_wrapper">
          <!-- <div class="mobile_menu_top"><span>Menu</span>
            <div class="mobile_menu_close"><svg t="1631538204213" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1295" width="20" height="20">
                <path
                  d="M571.01312 523.776l311.3472-311.35232c15.7184-15.71328 15.7184-41.6256 0-57.344l-1.69472-1.69984c-15.7184-15.71328-41.6256-15.71328-57.34912 0l-311.3472 311.77728-311.35232-311.77728c-15.7184-15.71328-41.63072-15.71328-57.344 0l-1.69984 1.69984a40.0128 40.0128 0 0 0 0 57.344L452.92544 523.776l-311.35232 311.35744c-15.71328 15.71328-15.71328 41.63072 0 57.33888l1.69984 1.69984c15.71328 15.7184 41.6256 15.7184 57.344 0l311.35232-311.35232 311.3472 311.35232c15.72352 15.7184 41.63072 15.7184 57.34912 0l1.69472-1.69984c15.7184-15.70816 15.7184-41.6256 0-57.33888l-311.3472-311.35744z"
                  p-id="1296"></path>
              </svg></div>
          </div> -->
          {% if section.settings.is_search %}
          <form action="/search" onsubmit="return oemsaasSearch('.search-mobile-input')" class="search-mobile-box">
            <button type="submit" class="button-claer"> 
            <svg class="search-mobile-icon" style="vertical-align: top;" t="1637129710453" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3527" width="20" height="20">
              <path fill="{{section.settings.icon_color}}" d="M747.52 696.32l133.12 133.12c15.36 15.36 15.36 35.84 0 51.2-15.36 15.36-35.84 15.36-51.2 0l-133.12-133.12c-158.72 133.12-399.36 107.52-527.36-51.2s-107.52-399.36 51.2-527.36 399.36-107.52 527.36 51.2c117.76 138.24 117.76 337.92 0 476.16zM460.8 158.72C291.84 158.72 158.72 291.84 158.72 460.8s133.12 302.08 302.08 302.08c168.96 0 302.08-133.12 302.08-302.08 0-168.96-133.12-302.08-302.08-302.08z" p-id="3528"></path>
            </svg>
          </button>
            <input class="search-mobile-input" type="text" placeholder="{{ section.settings.search_placeholder }}" />
          </form>
          {% endif %}
          <div class="mobile_nav">
            <ul>
              {% if section.settings.nav.id %}

              {% for item in header_nav.nav_item %}
              <li>
                <div   class="mobile_nav-item">
                  {% include "nav_a", nav : item  %}
                  {% if item.children %}
                  <svg t="1636003081626" style="margin-top: -2px;" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2399" width="14" height="14"><path d="M65.582671 288.791335l446.417329 446.41733 446.417329-446.41733z" fill="#b1b1b1" p-id="2400"></path></svg>
                  {% endif %}

                </div>
                {% if item.children %}
                <ul class="child_mobile_nav">
                {% for el in item.children %}
                  <li>
                    <div  class="mobile_nav-item">
                      {% include "nav_a", nav : el  %}
                      {% if el.children %}
                      <svg t="1636003081626" style="margin-top: -2px;" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2399" width="14" height="14"><path d="M65.582671 288.791335l446.417329 446.41733 446.417329-446.41733z" fill="#b1b1b1" p-id="2400"></path></svg>
                      {% endif %}
                    </div>
                    <ul class="child_mobile_nav">
                    {% for ddItem in el.children %}
                    <li style="padding:0 16px">
                     {% include "nav_a", nav : ddItem  %}
                    </li>
                    {% endfor %}
                    </ul>

                  </li>

                {% endfor %}
                </ul>
                {% endif %}
                
              </li>
              {% endfor %}
              {% else %}
               <li>
                <a href="/">Home</a>
              </li>
              {% endif %}
              
              {% if section.settings.is_member %}
              {% if customerInfo and customerInfo.email %}
              <li>
                <a href="/account">{{ lang.layout.customer.account }}</a>
              </li>
              {% else %}
              <li>
                <a href="/account/login">{{ lang.layout.customer.login }}</a>
              </li>
              <li>
                <a href="/account/register">{{ lang.layout.customer.create }}</a>
              </li>
              {% endif %}
              {% endif %}

            </ul>
          </div>
          {% if section.settings.is_currency %}
          <div class="mobile_currency">
            <select class="mobile_currency-select">
              {% get_currencies limit=100 %}
              {% for list in currencies %}
              <option value="{{ list.standard_code }}">
                {{ list.standard_code }} : {{ list.symbol_left }}{{ list.symbol_right }}
              </option>
              {% endfor %}
            </select>
          </div>
          {% endif %}

        </div>
      </div>
    </div>

 
</div>

<script type="text/javascript">
  console.log({{header_nav|json}})
	$(function(){
    $('.mobile_currency-select').val("{{currency.standard_code}}")
    $('.mobile_nav-item svg').click(function(){
      $(this).parent().siblings(".child_mobile_nav").slideToggle()
      if($(this).parent().hasClass('mobile_nav-item-open')){
        $(this).parent().removeClass('mobile_nav-item-open')
      }else{
        $(this).parent().addClass('mobile_nav-item-open')
      }
		})
    $('.mobile_currency-select').change(function(params) {
      currencyPath($(this).val())
    })

    $(".web-currency").click(function(){
      currencyPath($(this).data("type"))
    })

    function currencyPath(val){
      const currency = moi.getUrlParam('currency');
      if(currency || location.href.indexOf('theme_id') > -1){
        location.href = moi.changeURLArg(location.href,"currency",val)
      }
      else{
        location.href = moi.addURLParam(location.href,"currency",val)
      }
    }
    
   
    
		$('.saerch_icon').click(function(e){
                e.stopPropagation();

      if($('.pop_search').hasClass('pop_search_on')){
        $('.pop_search').removeClass('pop_search_on');
      }else{
        $('.pop_search').addClass('pop_search_on');
      }
			
		})

    $('.pop_search').click(function (e) {
                e.stopPropagation();
              });

    $(document).click(function () {
      if($('.pop_search').hasClass('pop_search_on')){
        $('.pop_search').removeClass('pop_search_on');
      }
    });
		
		$('.mobile_menu_icon').click(function(){
      if($('.mobile_menu').hasClass("mobile_menu_on")){
			$('.mobile_menu').removeClass('mobile_menu_on')

        return 
      }
			$('.mobile_menu').addClass('mobile_menu_on')
		})
		$('.mobile_menu_close,.mobile_menu').click(function(){
			$('.mobile_menu').removeClass('mobile_menu_on')
		})

    $('.mobile_menu-clear').click(function(){
			$('.mobile_menu').removeClass('mobile_menu_on')
		})
		$('.mobile_menu_wrapper').click(function(e){
			e.stopPropagation();
		})


		$('#cart_icon').click(function(){
			$('.minicart').addClass('minicart_on');
      const html = $('.minicart').find(".minicart_mid").html();
      if(!html){
          miniCart();
      }
		})
    $('.minicart .close_btn').click(function(){
			$('.minicart').removeClass('minicart_on');
		})
		$('.minicart').click(function(){
			$('.minicart').removeClass('minicart_on');
		})
		$('.minicart_wrapper').click(function(e){
			e.stopPropagation();
		})
		addCartNum();



	})
</script>

{% schema %}
{
  "tag": "",
  "class": "header",
  "is_global": true,
  "name": {
    "zh_CN": "头部"
  },
  "max_blocks": "0",
  "settings": [
    {
      "type": "card_header",
      "label": {
        "zh_CN": "菜单导航设置"
      }
    },
    {
      "type": "card_nav",
      "label": {
        "zh_CN": "选择菜单"
      },
      "default": {
        "id":"",
        "title":""
      },
      "id": "nav"
    },
    {
      "type": "card_header",
      "label": {
        "zh_CN": "公告栏"
      }
    },
    {
      "type": "card_switch",
      "label": {
        "zh_CN": "开启公告栏"
      },
      "id": "is_board",
      "default": true
    },
    {
      "type": "card_switch",
      "label": {
        "zh_CN": "仅首页显示公告栏"
      },
      "id": "is_index_board"
    },
    {
      "type": "card_input",
      "label": {
        "zh_CN": "公告栏文案"
      },
      "id": "board_text",
      "default": "We Free Shipping Worldwide."
    },
    {
      "type": "card_page_link",
      "label": {
        "zh_CN": "公告栏链接"
      },
      "default": {
        "type": "",
        "title": "",
        "url": ""
      },
      "id": "board_link"
    },
    {
      "type": "card_header",
      "label": {
        "zh_CN": "顶部LOGO与图片"
      }
    },
    {
      "type": "card_image",
      "label": {
        "zh_CN": "logo图片"
      },
      "id": "logo_pic",
      "default": ""
    },
    {
      "type": "card_switch",
      "label": {
        "zh_CN": "个人中心"
      },
      "id": "is_member",
      "default": "1"
    },
    {
      "type": "card_switch",
      "label": {
        "zh_CN": "搜索"
      },
      "id": "is_search",
      "default": "1"
    },
    {
      "type": "card_switch",
      "label": {
        "zh_CN": "货币切换"
      },
      "id": "is_currency",
      "default": "1"
    },
    {
      "type": "card_input",
      "label": {
        "zh_CN": "搜索底纹"
      },
      "id": "search_placeholder",
      "default": "Search"
    },
    {
      "type": "card_header",
      "label": {
        "zh_CN": "颜色设置"
      }
    },
    {
      "type": "card_color",
      "label": {
        "zh_CN": "公告栏字体"
      },
      "id": "board_font",
      "default": "#333"
    },
    {
      "type": "card_color",
      "label": {
        "zh_CN": "公告栏背景"
      },
      "id": "board_bg",
      "default": "#fff"
    },
    {
      "type": "card_color",
      "label": {
        "zh_CN": "导航栏背景"
      },
      "id": "nav_bg",
      "default": "#fff"
    },
    {
      "type": "card_color",
      "label": {
        "zh_CN": "菜单项字体"
      },
      "id": "menu_color",
      "default": "#1d1f21"
    },
    {
      "type": "card_color",
      "label": {
        "zh_CN": "图标"
      },
      "id": "icon_color",
      "default": "#1d1f21"
    }
  ],
  "blocks": [],
  "default": {
    "settings": {
      "nav": {
        "id":"",
        "title":""
      },
      "is_board": true,
      "is_index_board": false,
      "board_text": "We Free Shipping Worldwide.",
      "board_link": {
        "type": "",
        "title": "",
        "url": ""
      },
      "logo_pic": {
        "src":"",
        "alt":""
      },
      "is_member": true,
      "is_search": true,
      "is_currency": true,
      "board_font": "#ddd",
      "board_bg": "#1d1f21",
      "nav_bg": "#fff",
      "search_placeholder":"Search",
      "menu_color": "#1d1f21",
      "icon_color": "#1d1f21"
    },
    "blocks": []
  }
}
{% endschema %}